import React, { useEffect, useState } from "react";
import {
  Swiper,
  NoticeBar,
  Skeleton,
  Grid,
  Button,
  Input,
  Form,
  Toast,
  Card,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "../assets/home.module.scss";
import { useHomeData } from "../hooks/use-home";
import { dalImg } from "../utils/tools";
import { AntOutline, RightOutline } from "antd-mobile-icons";
import "/node_modules/font-awesome/css/font-awesome.min.css";
import { get } from "../utils/request";
function Home() {
  const [list, setList] = useState<any>([]);

  const { banners, categories } = useHomeData();

  const navigate = useNavigate();

  useEffect(() => {
    const data = get("/doctors");
  }, []);
  return (
    <div className="home">
      <Swiper style={{ height: "30vh" }} loop stuckAtBoundary={false}>
        {banners.map((item: App.Banner) => (
          <Swiper.Item key={item.id} style={{ width: "100vw" }}>
            <img
              src={dalImg(item.avatar)}
              alt=""
              style={{ width: "100%", height: "100%" }}
            />
          </Swiper.Item>
        ))}
      </Swiper>
      <NoticeBar
        content="郑州市多家医院的著名医师，众多科室，满足你的一切就诊需求"
        color="alert"
      />
      <input
        type="text"
        placeholder="搜素症状/疾病/药品/医生/科室"
        className="input"
      />
      <p className={styles.four}>
        <span
          className={styles.spanindex}
          onClick={() => {
            navigate("./home/doctors");
          }}
        >
          <b className="fa fa-user bpic"></b> 找医生
        </span>
        <span
          className={styles.spanindex}
          onClick={() => {
            navigate("./home/medicine");
          }}
        >
          {" "}
          <b className="fa fa-medkit bpic"></b> 找药品
        </span>
        <span
          className={styles.spanindex}
          onClick={() => {
            navigate("./home/illness");
          }}
        >
          {" "}
          <b className="fa fa-h-square bpic"></b> 查疾病
        </span>
        <span
          className={styles.spanindex}
          onClick={() => {
            navigate("./home/lecture");
          }}
        >
          {" "}
          <b className="fa fa-tv "></b> 医生讲堂
        </span>
      </p>
      <Card
        title={
          <div style={{ fontWeight: "normal", fontSize: "25px" }}>
            <AntOutline style={{ marginRight: "4px", color: "#1677ff" }} />
            身体小问题，快速问医生
          </div>
        }
        extra={<RightOutline />}
        // onBodyClick={onBodyClick}
        // onHeaderClick={onHeaderClick}
        style={{ borderRadius: "16px", fontSize: "16px", textAlign: "center" }}
      >
        <div className={styles.content}>
          三甲医院主治及以上医生，已解答 120万 个问题
        </div>
        <div className={styles.footer} onClick={(e) => e.stopPropagation()}>
          <Button
            style={{ width: "80vw", display: "block", margin: "20px auto" }}
            color="primary"
            onClick={() => {
              navigate("./home/quiz");
            }}
          >
            快速提问
          </Button>
        </div>
      </Card>
      <Grid columns={3} gap={8}>
        {categories.map((item: App.Category) => (
          <Grid.Item key={item.id}>
            <div className={styles["grid-demo-item-block"]}>
              <img src={item.coverImage} alt="" />
              <span>{item.name}</span>
            </div>
          </Grid.Item>
        ))}
      </Grid>
      {list.map((item: App.Product) => (
        <div className="p-item" key={item.id}>
          <img src={item.coverImage} alt="" />
          <h3>{item.name}</h3>
          <p>价格:￥{item.price}</p>
          <p>库存:{item.amount}</p>
          <Button
            color="primary"
            onClick={() => {
              navigate("/list/" + item.id);
            }}
          >
            购买
          </Button>
        </div>
      ))}

      {/* 
        骨架屏的案例, 骨架屏的目的是为了提高用户体验 
        没数据的时候显示占位效果，有数据之后把展位效果进行隐藏
      */}
      {/* {list.length == 0 ? (
        <div className="loading">
          <Skeleton.Title animated />
          <Skeleton.Paragraph lineCount={5} animated />
        </div>
      ) : (
        <p>数据展示的内容</p>
      )} */}
    </div>
  );
}

export default Home;
